<template lang="pug">
  #app.app(:class='{"sidebar-visible":menuActive||menuHover, "menu-pin sidebar-open":menuActive}')
    Topbar(
      :realName='realName'
      :currentSystem='currentSystem'
      @selectHomeMenu="selectHomeMenu"
      @toggleMenu="toggleMenu"
      @toggleSystem="toggleSystem")
    #container.app-container(:class='{"container-active":menuActive}')
      Sidebar.sidebar(
        v-if="currentSystemId"
        :menuActive='menuActive'
        :currentSystemId="currentSystemId"
        :systemMenuShow='systemMenuShow'
        :systems="systems"
        @toggleMenu="toggleMenu"
        @changeHover='changeHover')
      .content-wrapper
        .content
          //- keep-alive
          router-view
</template>

<script>
import { locationContent, getSystemLink, changeUrl } from '@/utils/auth'
import { treeFormat } from '@/utils/common'
import Sidebar from './Sidebar'
import Topbar from './Topbar'

export default {
  name: 'hello',
  components: {
    Sidebar,
    Topbar
  },
  data() {
    return {
      systemMenuShow: false,
      menuActive: true,
      menuHover: false,
      realName: '',
      loadingStyle: {},
      currentMenu: {}
    }
  },
  mounted() {
    if (document.getElementById('loading')) {
      document.body.removeChild(document.getElementById('loading'))
    }
  },
  created() {
    this.loadingStyle = {
      background: 'rgba(0,0,0,0.3)'
    }
    this.realName = localStorage.realname
    // console.log(localStorage.menus)
    this.menus = JSON.parse(localStorage.menus)
    this.findCurrentMenu()
  },
  watch: {
    $route() {
      this.findCurrentMenu()
    }
  },
  computed: {
    systems() {
      return treeFormat(this.resultMenu)
    },
    currentSystemId() {
      return this.currentMenu.systemId
    },
    currentSystem() {
      return this.systems.find(({ id }) => id === this.currentSystemId)
    },
    currentPath() {
      return this.currentMenu.path.split(',').map(Number)
    },
    resultMenu() {
      return this.menus.filter(item => item.type !== 'BUTTON').map(item => {
        return {
          ...item,
          isOpen: false,
          isActive: this.currentPath.includes(item.id)
        }
      })
    }
  },
  methods: {
    findCurrentMenu() {
      const location = locationContent()
      this.currentMenu = this.menus.find(({ url }) => url === location)
    },
    selectHomeMenu() {
      // 点击进入要显示在线监控，在线监控又不是第一个
      const systemMenu = this.systems.find(
        ({ menuTypeId }) => menuTypeId === 'HOME'
      )
      const monitorMenu = systemMenu.children.find(
        ({ url }) => url === '/monitor/#/dashboard'
      )
      if (monitorMenu) {
        changeUrl(monitorMenu.url)
      } else {
        changeUrl(getSystemLink(systemMenu))
      }
    },
    toggleMenu() {
      this.menuActive = !this.menuActive
    },
    toggleSystem() {
      this.systemMenuShow = !this.systemMenuShow
    },
    changeHover(state) {
      this.menuHover = state
    }
  }
}
</script>

<style lang="sass" scoped>
.app
  display: flex
  flex-direction: column
.app-container
  position: relative
  display: flex
  flex-direction: row
  flex: 1
.content-wrapper
  display: flex
  flex: 1
  overflow: auto
.content
  display: flex
  flex: 1
  width: 100%
  background: #ecf0f1
</style>
